<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        input{
            outline: none;
        }
        img{
            vertical-align: bottom;
        }
        #templete{
            display: none;
        }
    </style>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- head -->
    <div id="header">
        <img src="img/logo.png" alt="" class="img1">
        <ul class="header-ul1">
            <li><a href="">网站首页</a></li>
            <li><a href="">传悦资源</a></li>
            <li><a href="">传悦案例</a></li>
            <li><a href="">传悦服务</a></li>
            <li><a href="">解决方案</a></li>
            <li><a href="">需求提交</a></li>
        </ul>
    </div>
    <!-- banner -->
    <div id="banner">
        <div class="banner-xm">
            <p class="banner-p">
                <span><a href="">网站首页&nbsp;</a></span>
                <span>>&nbsp;</span>
                <span><a href="">传阅案例</a></span>
            </p>
        </div>
    </div>

    <!-- content -->
    <div id="tl">
        <div id="content">
            <!-- <p class="content-p1"> -->
            <ul class="content-ul1">
                <li class="content-ul1-li1"><a href="#">全部</a></li>
                <li><a href="#">网站建设</a></li>
                <li><a href="#">推广运营</a></li>
                <li><a href="#">品牌策划</a></li>
                <li><a href="#">网络全案</a></li>
            </ul>
            <br>
            <!-- </p> -->
            <div>
                <ul class="content-ul2" id="list">
                    <li id="templete">
                        <a href="details.html">
                            <img src="img/3.1.png" alt="" id="img">
                            <p>重德集团 &nbsp;网站建设</p>
                            <span>网站建设 品牌形象 整合营销 引导销售</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="con-p">
                <p><a href="#"><</a></p>
                <p><a href="#">1</a></p>
                <p><a href="#" class="focus">2</a></p>
                <p><a href="#">3</a></p>
                <p><a href="#">4</a></p>
                <p><a href="#">></a></p>
            </div>
            
        </div>
    </div>
    <!-- footer -->
    <div id="footer">
        <div class="footer1">
            <img src="img/4.1.png" alt="" class="footer-img1">
            <div class="footer2">
                <ul>
                    <li>关于传说</li>
                    <li>新闻动态</li>
                    <li>传阅观点</li>
                    <li>联系传悦</li>
                    <li>加入传悦</li>
                    <li>付款账户</li>
                </ul>
                <p>Copyright 2013 创梦网络科技有限责任公司&nbsp;&nbsp;||&nbsp;&nbsp;传悦 Chnyoo.cn All Rights Reserved&nbsp;&nbsp;&nbsp;京ICP备12005221号</p>
            </div>
        </div>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        // 发送ajax请求
        let http = new XMLHttpRequest();
        http.open('GET',"http://127.0.0.1:8080/getnewsList")
        http.send()
        http.onreadystatechange=function(){
            if(http.readyState===4){
                // 将这个字符串解析成对象
               
                let data = JSON.parse(http.responseText)
                console.log(data);
                let tem = $("#templete")
                let list = $("#list")
                data.forEach(item=>{
                    let newItem = tem.clone()
                    newItem.attr("id","").find("a").attr('href',`details.html?id=${item.id}`)
                    newItem.attr("id","").find("#img").attr('src',item.img)
                    newItem.attr("id","").find("p").html(item.title)
                    newItem.attr("id","").find("span").html(item.retitle)
                    newItem.appendTo(list)

                })
            }
        }
    </script>
</body>
</html>